<template>
	<view class="content">
		<view>
			<view class="tab">    
				<view class="tabItem" :class="{'active' : 0 == tab_current}" @click="clickTab(0)">
					<text :class="{'borderline' : 0 == tab_current}">全部</text>
				</view>
				<view class="tabItem" :class="{'active' : 1 == tab_current}" @click="clickTab(1)">
					<text :class="{'borderline' : 1 == tab_current}">出售</text>
				</view>
				<view class="tabItem" :class="{'active' : 2 == tab_current}" @click="clickTab(2)">
					<text :class="{'borderline' : 2 == tab_current}">借阅</text>
				</view>
				<view class="tabItem" :class="{'active' : 3 == tab_current}" @click="clickTab(3)">
					<text :class="{'borderline' : 3 == tab_current}">交换</text>
				</view>				
				<view class="tabItem" :class="{'active' : 4 == tab_current}" @click="clickTab(4)">
					<text :class="{'borderline' : 4 == tab_current}">赠送</text>
				</view>
			</view>
			<view class="itemcar" v-show="tab_current == 0">
				<!-- 全部 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltolower"
					@scroll="scroll"
				>
					<view v-for="(alllist,index) in Alllists" :key="index">
						<navigator class="item" :url="'./yuelininfo?bagid=' + alllist.id">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + alllist.books.bimg_m"></image>
							<view class="text-box">
								<view class="text-area">
									<text class="bookname" selectable="true" user-select="true">{{alllist.books.book_name}}</text>
									<text class="other" selectable="true" user-select="true">{{alllist.books.zuozhe}} | {{alllist.books.chubanshe}} </text>
									<view class="jinfo">
										<text v-if="alllist.otype == 'S'" class="jiage">￥{{alllist.nowprice}}</text>
										<text v-if="alllist.otype == 'J'" class="jiage1">借阅</text>
										<text v-if="alllist.otype == 'E'" class="jiage1">交换</text>
										<text v-if="alllist.otype == 'Z'" class="jiage1">赠送</text>
										<text v-if="alllist.condition == 0" class="zhejiu">较旧</text>
										<text v-if="alllist.condition == 5" class="zhejiu">5成新</text>
										<text v-if="alllist.condition == 6" class="zhejiu">6成新</text>
										<text v-if="alllist.condition == 7" class="zhejiu">7成新</text>
										<text v-if="alllist.condition == 8" class="zhejiu">8成新</text>
										<text v-if="alllist.condition == 9" class="zhejiu">9成新</text>
										<text v-if="alllist.condition == 10" class="zhejiu">全新</text>
									</view>
								</view>
								<view class="userinfo">
									<view>
										<image v-if="alllist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + alllist.users.avatar_file_min"></image>
									</view>
									<text class="mingzi">{{alllist.users.user_name}}</text>
								</view>
							</view>							
						</navigator>
					</view>
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 1">
				<!-- 出售 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltolower"
					@scroll="scroll"
				>
					<view v-for="(slist,index) in Slists" :key="index">
						<navigator class="item" :url="'./yuelininfo?bagid=' + slist.id">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + slist.books.bimg_m"></image>
							<view class="text-box">
								<view class="text-area">
									<text class="bookname" selectable="true" user-select="true">{{slist.books.book_name}}</text>
									<text class="other" selectable="true" user-select="true">{{slist.books.zuozhe}} | {{slist.books.chubanshe}} </text>
									<view class="jinfo">
										<text v-if="slist.otype == 'S'" class="jiage">￥{{slist.nowprice}}</text>
										<text v-if="slist.otype == 'J'" class="jiage1">借阅</text>
										<text v-if="slist.otype == 'E'" class="jiage1">交换</text>
										<text v-if="slist.otype == 'Z'" class="jiage1">赠送</text>
										<text v-if="slist.condition == 0" class="zhejiu">较旧</text>
										<text v-if="slist.condition == 5" class="zhejiu">5成新</text>
										<text v-if="slist.condition == 6" class="zhejiu">6成新</text>
										<text v-if="slist.condition == 7" class="zhejiu">7成新</text>
										<text v-if="slist.condition == 8" class="zhejiu">8成新</text>
										<text v-if="slist.condition == 9" class="zhejiu">9成新</text>
										<text v-if="slist.condition == 10" class="zhejiu">全新</text>
									</view>
								</view>
								<view class="userinfo">
									<view>
										<image v-if="slist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + slist.users.avatar_file_min"></image>
									</view>
									<text class="mingzi">{{slist.users.user_name}}</text>
								</view>
							</view>	
						</navigator>
					</view>
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 2">
				<!-- 借阅 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltolower"
					@scroll="scroll"
				>
					<view v-for="(jlist,index) in Jlists" :key="index">
						<navigator class="item" :url="'./yuelininfo?bagid='  + jlist.id">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + jlist.books.bimg_m"></image>
							<view class="text-box">
								<view class="text-area">
									<text class="bookname" selectable="true" user-select="true">{{jlist.books.book_name}}</text>
									<text class="other" selectable="true" user-select="true">{{jlist.books.zuozhe}} | {{jlist.books.chubanshe}} </text>
									<view class="jinfo">
										<text v-if="jlist.otype == 'S'" class="jiage">￥{{jlist.nowprice}}</text>
										<text v-if="jlist.otype == 'J'" class="jiage1">借阅</text>
										<text v-if="jlist.otype == 'E'" class="jiage1">交换</text>
										<text v-if="jlist.otype == 'Z'" class="jiage1">赠送</text>
										<text v-if="jlist.condition == 0" class="zhejiu">较旧</text>
										<text v-if="jlist.condition == 5" class="zhejiu">5成新</text>
										<text v-if="jlist.condition == 6" class="zhejiu">6成新</text>
										<text v-if="jlist.condition == 7" class="zhejiu">7成新</text>
										<text v-if="jlist.condition == 8" class="zhejiu">8成新</text>
										<text v-if="jlist.condition == 9" class="zhejiu">9成新</text>
										<text v-if="jlist.condition == 10" class="zhejiu">全新</text>
									</view>
								</view>
								<view class="userinfo">
									<view>
										<image v-if="jlist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + jlist.users.avatar_file_min"></image>
									</view>
									<text class="mingzi">{{jlist.users.user_name}}</text>
								</view>
							</view>
						</navigator>
					</view>
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 3">
				<!-- 交换 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltolower"
					@scroll="scroll"
				>
					<view v-for="(elist,index) in Elists" :key="index">
						<navigator class="item" :url="'./yuelininfo?bagid='  + elist.id">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + elist.books.bimg_m"></image>
							<view class="text-box">
								<view class="text-area">
									<text class="bookname" selectable="true" user-select="true">{{elist.books.book_name}}</text>
									<text class="other" selectable="true" user-select="true">{{elist.books.zuozhe}} | {{elist.books.chubanshe}} </text>
									<view class="jinfo">
										<text v-if="elist.otype == 'S'" class="jiage">￥{{elist.nowprice}}</text>
										<text v-if="elist.otype == 'J'" class="jiage1">借阅</text>
										<text v-if="elist.otype == 'E'" class="jiage1">交换</text>
										<text v-if="elist.otype == 'Z'" class="jiage1">赠送</text>
										<text v-if="elist.condition == 0" class="zhejiu">较旧</text>
										<text v-if="elist.condition == 5" class="zhejiu">5成新</text>
										<text v-if="elist.condition == 6" class="zhejiu">6成新</text>
										<text v-if="elist.condition == 7" class="zhejiu">7成新</text>
										<text v-if="elist.condition == 8" class="zhejiu">8成新</text>
										<text v-if="elist.condition == 9" class="zhejiu">9成新</text>
										<text v-if="elist.condition == 10" class="zhejiu">全新</text>
									</view>
								</view>
								<view class="userinfo">
									<view>
										<image v-if="elist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + elist.users.avatar_file_min"></image>
									</view>
									<text class="mingzi">{{elist.users.user_name}}</text>
								</view>
							</view>
						</navigator>
					</view>
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
			<view class="itemcar" v-show="tab_current == 4">
				<!-- 赠送 -->
				<scroll-view class="scroll-y"
					scroll-y = "true"
					:refresher-enabled="refresherenabled"
					:refresher-threshold="50" 
					scroll-anchoring="true"
					:refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh"
					@refresherrestore="refresherrestore"
					@refresherabort="refresherabort"
					lower-threshold = "50"
					@scrolltolower="scrolltolower"
					@scroll="scroll"
				>
					<view v-for="(zlist,index) in Zlists" :key="index">
						<navigator class="item" :url="'./yuelininfo?bagid=' + zlist.id">
							<image class="fengmian" :src="'https://www.yedushu.cn/' + zlist.books.bimg_m"></image>
							<view class="text-box">
								<view class="text-area">
									<text class="bookname" selectable="true" user-select="true">{{zlist.books.book_name}}</text>
									<text class="other" selectable="true" user-select="true">{{zlist.books.zuozhe}} | {{zlist.books.chubanshe}} </text>
									<view class="jinfo">
										<text v-if="zlist.otype == 'S'" class="jiage">￥{{zlist.nowprice}}</text>
										<text v-if="zlist.otype == 'J'" class="jiage1">借阅</text>
										<text v-if="zlist.otype == 'E'" class="jiage1">交换</text>
										<text v-if="zlist.otype == 'Z'" class="jiage1">赠送</text>
										<text v-if="zlist.condition == 0" class="zhejiu">较旧</text>
										<text v-if="zlist.condition == 5" class="zhejiu">5成新</text>
										<text v-if="zlist.condition == 6" class="zhejiu">6成新</text>
										<text v-if="zlist.condition == 7" class="zhejiu">7成新</text>
										<text v-if="zlist.condition == 8" class="zhejiu">8成新</text>
										<text v-if="zlist.condition == 9" class="zhejiu">9成新</text>
										<text v-if="zlist.condition == 10" class="zhejiu">全新</text>
									</view>
								</view>
								<view class="userinfo">
									<view>
										<image v-if="zlist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + zlist.users.avatar_file_min"></image>
									</view>
									<text class="mingzi">{{zlist.users.user_name}}</text>
								</view>
							</view>
						</navigator>
					</view>
					<view v-if="isLoading" class="isload">加载更多...</view>
					<view v-else class="isend">~~ 我是有底线的 ~~</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_current: 0, // 当前选项卡
				// 转让方式 -- J借阅，E交换，S出售，Z赠送，B以上均可
				Alllists: [], //全部
				Jlists: [], //借阅
				Elists: [], //交换
				Slists: [], //出售
				Zlists: [], //赠送
				Alllists_click: 0,
				Jlists_click: 0,
				Elists_click: 0,
				Slists_click: 0,
				Zlists_click: 0,
				All_current_page: 1,
				J_current_page: 1,
				E_current_page: 1,
				S_current_page: 1,
				Z_current_page: 1,				
				isLoading: false,
				refresherTriggered: false,
				refresherenabled: true
			}
		},
		onLoad() {
			this.isLoading = true;
			// 加载第一个选项卡的数据
			this.getYuelin(0); 
		},		
		methods: {
			refresherrefresh(){
				// console.log("自定义scroll-view下拉刷新==被触发");	
				// console.log(this.refresherTriggered);
				// 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
				if (this.refresherTriggered) {
					return;
				}
				this.refresherTriggered = true;				
				//下拉触发，refresherTriggered可能不是true，要设为true
				if(!this.refresherTriggered) 
				{
					this.refresherTriggered = true;
					return;
				}		
				
				// 下拉获得第一页数据				
				if(this.tab_current == 0)
				{
					// 清空数据
					this.Alllists = [];
					// 获取第一页数据
					this.All_current_page = 1;
				}				
				
				if(this.tab_current == 1)
				{
					this.Slists = [];
					this.S_current_page = 1;
				}
				
				if(this.tab_current == 2)
				{
					this.Jlists = [];
					this.J_current_page = 1;
				}
				
				if(this.tab_current == 3)
				{
					this.Elists = [];
					this.E_current_page = 1;
				}
				
				if(this.tab_current == 4)
				{
					this.Zlists = [];
					this.Z_current_page = 1;
				}				
				// console.log(this.tab_current);
				this.getYuelin(this.tab_current);
			},
			refresherrestore(){
				// console.log("自定义scroll-view下拉刷新==被复位");
				this.refresherTriggered = false;
			},
			refresherabort(){
				// console.log("自定义scroll-view下拉刷新==被中止");
				this.refresherTriggered = false;
			},
			scrolltolower() {
				// console.log("自定义滚动到底部加载更多");
				this.scrolltobottom();
			},
			// 切换tab选项卡
			clickTab(cur){
				this.tab_current = cur;	
				
				if(cur == 0)
				{
					if(this.Alllists_click == 0)
					{
						this.getYuelin(cur);
					}
					this.Alllists_click = 1;
				}
				if(cur == 1)
				{
					if(this.Slists_click == 0)
					{
						this.getYuelin(cur);
					}
					this.Slists_click = 1;
				}
				if(cur == 2)
				{
					if(this.Jlists_click == 0)
					{
						this.getYuelin(cur);
					}
					this.Jlists_click = 1;					
				}
				if(cur == 3)
				{
					if(this.Elists_click == 0)
					{
						this.getYuelin(cur);
					}
					this.Elists_click = 1;					
				}
				if(cur == 4)
				{
					if(this.Zlists_click == 0)
					{
						this.getYuelin(cur);
					}
					this.Zlists_click = 1;					
				}
			},
			getYuelin(cur) {
				// 获得书城中的书籍列表
				if(cur == 0)
				{
					var otype = '';
					var page = this.All_current_page;
				}
				if(cur == 1)
				{
					var otype = 's';
					var page = this.S_current_page;
				}
				if(cur == 2)
				{
					var otype = 'j';
					var page = this.J_current_page;
				}
				if(cur == 3)
				{
					var otype = 'e';
					var page = this.E_current_page;
				}
				if(cur == 4)
				{
					var otype = 'z';
					var page = this.Z_current_page;
				}
				var url = 'https://www.yedushu.cn/api/shopbookslist?type=' + otype + '&page=' + page;
				uni.request({
				    url: url,
				    success: (res) => {
				        // console.log(JSON.stringify(res));
						if(res.data.last_page > page)
						{
							this.isLoading = true;
						}
						else {
							this.isLoading = false;
						}
						// 当前以后数据连接新获取的数据
						// 转让方式 -- J借阅，E交换，S出售，Z赠送，B以上均可
						if(cur == 0)
						{
							this.Alllists = this.Alllists.concat(res.data.data);
						}
						if(cur == 1)
						{
							this.Slists = this.Slists.concat(res.data.data);
						}
						if(cur == 2)
						{
							this.Jlists = this.Jlists.concat(res.data.data);
						}
						if(cur == 3)
						{
							this.Elists = this.Elists.concat(res.data.data);
						}
						if(cur == 4)
						{
							this.Zlists = this.Zlists.concat(res.data.data);
						}
						// 停止页面刷新动画
						// uni.stopPullDownRefresh();
						//关闭刷新图标
						this.refresherTriggered = false;
				    }
				});	
			},
			scroll(e) {
				if (e.detail.scrollTop == 0) {
					// console.log(e.detail.scrollTop);
					this.refresherenabled = true;
				} else {
					this.refresherenabled = false;
				}
			},
			scrolltobottom() {
				// scroll-view滚到底,用于下拉下一页数据。
				// console.log("===加载更多===");
				// 上拉加载更多						
				if(this.tab_current == 0)
				{
					// 获得当前页面
					this.All_current_page = this.All_current_page + 1;	
				}				
				
				if(this.tab_current == 1)
				{
					// 获得当前页面
					this.S_current_page = this.S_current_page + 1;	
				}
				
				if(this.tab_current == 2)
				{
					// 获得当前页面
					this.J_current_page = this.J_current_page + 1;	
				}
				
				if(this.tab_current == 3)
				{
					// 获得当前页面
					this.E_current_page = this.E_current_page + 1;	
				}
				
				if(this.tab_current == 4)
				{
					// 获得当前页面
					this.Z_current_page = this.Z_current_page + 1;	
				}
				
				// console.log(this.tab_current);
				this.getYuelin(this.tab_current);
			},
		}
	}
</script>

<style>	
	.content {
		display: flex;
		flex-direction: column;
	}
	.tab{
	    width: 100%;
		padding: 10px 0 0 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		border-bottom: 1px solid #f3f3f3;
		position: fixed;
		z-index: 100;
		background-color: #FFFFFF;
	}
	.tabItem{
	    width: 100%;
	    height: 25px;
	    line-height: 25px;
	    font-size: 15px;
	    text-align: center;
	    color: #666666;
	}
	.active{		
	    color: #000000;
	}
	.itemcar {
		display: flex;
		padding: 35px 0 0 0; // scroll-view区域
		position: fixed; // scroll-view滚动
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.itemcar .scroll-y {
		padding: 0 10px;
		width: 100%;
		height: 100%;
	}
	.borderline {
		border-bottom: 2px solid #808080;
	}
	.item {
		display: flex;
		padding: 15px 0px;
		border-bottom: 1px dashed #E8E8E8;
	}
	.fengmian {
		width: 80px;
		height: 108px;		
		padding-right: 8px;
	}
	.text-box {		
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.text-area {
		display: flex;
		flex-direction: column;
	}
	.bookname {
		font-size: 16px;
	}
	.other {
		font-size: 12px;
		color: #999;
		padding: 6px 0;
	}
	.jinfo {
		padding:0 0;
	}
	.jinfo .jiage {
		font-size: 16px;
		padding-right: 5px;
	}
	.jinfo .jiage1 {
		font-size: 15px;
		padding-right: 5px;
	}
	.jinfo .zhejiu {
		font-size: 10px;
		color: #ff0000;
		border: 1px solid #ff0000 ;
		padding: 0px 5px;
		border-radius: 5px;
	}
	.userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.userinfo .face {
		width: 15px;
		height: 15px;
		border-radius: 50%;
	}
	.userinfo .mingzi {
		font-size: 10px;		
		padding-left: 5px;
	}
	.isload {
		font-size: 14px;
		padding: 20px 0px;
		text-align: center;
	}
	.isend {
		font-size: 14px;
		padding: 10px 10px;
		text-align: center;		
	}
</style>
